<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>项目一</title>
  <link rel="stylesheet" href="./css/icon-font.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <header class="header">
    <div class="logo-box">
      <img class="logo" src="./images/logoko-white.png" alt="">
    </div>
    <div class="text-box">
      <h1 class="heading-primary">
        <span class="heading-primary-main">Outdoors</span>
        <span class="heading-primary-sub">is where life happend</span>
      </h1>
      <a href="#" class="btn btn-white btn-animated">Discover our tour</a>
    </div>
  </header>

  <main>
    <section class="about">
      <div class="u-center-text u-margin-bottom-8">
        <h2 class="heading-secondary">
          Exciting tours for adventurous people
        </h2>
      </div>
      <div class="row">
        <div class="col-1-of-2">
          <h3 class="heading-tertiary u-margin-bottom-2">You're going to fall in love with nature</h3>
          <p class="paragraph">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus est odio, et repellat impedit excepturi
            cumque, obcaecati nulla corporis, distinctio asperiores veniam! Enim necessitatibus harum, dolores
            voluptates minus quisquam et?
          </p>
          <h3 class="heading-tertiary u-margin-bottom-2">Live adventures like you never have before</h3>
          <p class="paragraph">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi laborum voluptates commodi beatae, nulla
            natus dolores!
          </p>
          <a href="#" class="btn-text">Learn more &rarr;</a>
        </div>
        <div class="col-1-of-2">
          <div class="composition">
            <img src="./images/1.jpg" alt="Photo1" class="composition-photo composition-photo-p1">
            <img src="./images/3.jpg" alt="Photo2" class="composition-photo composition-photo-p2">
            <img src="./images/4.jpg" alt="Photo3" class="composition-photo composition-photo-p3">
          </div>
        </div>
      </div>
    </section>
    <section class="features">
      <div class="row">
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box-icon icon-basic-world"></i>
            <h3 class="heading-tertiary u-margin-bottom-2">Explore the world</h3>
            <p class="feature-box-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus laborum adipisci aut?
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box-icon icon-basic-map"></i>
            <h3 class="heading-tertiary u-margin-bottom-2">Meet Nature</h3>
            <p class="feature-box-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus laborum adipisci aut?
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box-icon icon-basic-compass"></i>
            <h3 class="heading-tertiary u-margin-bottom-2">Find your way</h3>
            <p class="feature-box-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus laborum adipisci aut?
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box-icon icon-basic-heart"></i>
            <h3 class="heading-tertiary u-margin-bottom-2">Explore the world</h3>
            <p class="feature-box-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus laborum adipisci aut?
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="tours">
      <div class="u-center-text u-margin-bottom-8">
        <h2 class="heading-secondary">
          Most popular tours
        </h2>
      </div>
      <div class="row">
        <div class="col-1-of-3 card">
          <div class="card-side">
            col-1-of-3
          </div>
        </div>
        <div class="col-1-of-3 card">col-1-of-3</div>
        <div class="col-1-of-3 card">col-1-of-3</div>
      </div>

    </section>
  </main>

  <!-- <div class="grid-box">
    <div class="row">
      <div class="col-1-of-2">col-1-of-2</div>
      <div class="col-1-of-2">col-1-of-2</div>
    </div>
    <div class="row">
      <div class="col-1-of-3">col-1-of-3</div>
      <div class="col-2-of-3">col-2-of-3</div>
    </div>
    <div class="row">
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-2-of-4">col-2-of-4</div>
    </div>
    <div class="row">
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-3-of-4">col-3-of-4</div>
    </div>
  </div> -->
</body>

</html>